<template>
  <div class="app-container">
    <div class="filter-container flex-w" style="align-item:flex-end">
      <template v-for="(i) in queryFileds">
        <div :key="i.key" class="filter-item" v-if="checkedkeys.some(j => j == i.title)">
          <el-select v-if="i.name == 'select'" v-model="query[i.key]" :style="{ 'width': i.width + 'px' }"
            :placeholder="`选择${i.title}`" filterable clearable @change="changeSearch">
            <el-option v-for="(item, index) in i.options" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-else-if="i.name == 'daterange'" @change="changeSearch" :style="{ 'width': i.width + 'px' }"
            v-model="query[i.key]" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <el-input v-else v-model.trim="query[i.key]" @change="changeSearch" :style="{ 'width': i.width + 'px' }"
            :placeholder="`输入${i.title}`"></el-input>
        </div>
      </template>
      <div v-for="(item, index) in showButtons" :key='index' class="filter-item">
        <el-button v-on:click="item.event" :type="item.type" plain>{{ item.name }}</el-button>
      </div>
      <div v-if="queryFileds.length > 5" class="pointer t-12 text-primary ml-5"
        style="text-decoration:underline;height:24px;line-height:36px" @click="drawerFlag = true">
        筛选搜索条件
      </div>
    </div>
    <el-drawer :title="`${curPageName} 搜索选项筛选`" :show-close='false' :wrapperClosable='false' v-model="drawerFlag"
      direction="ttb" size='25%'>
      <div class="pl-30 pr-30 ">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{ checkAll ? '全不选' : '全选' }}</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedkeys" @change="handleCheckedKeysChange">
          <el-checkbox v-for="key in keyOptions" :label="key" :key="key">{{ key }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="text-right mt-10 mr-20">
        <el-button @click="drawerFlag = false">取消</el-button>
        <el-button type="primary" @click="handleSearchSubmit">确认
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  props: {
    queryFileds: {
      // 表单配置项,目前设置超过5条搜索条件,展示"筛选搜索条件",否则不展示
      type: Array,
      default: () => {
        return []
      },
    },
    showButtons: {
      // 表单后搜索按钮
      type: Array,
      default: () => {
        return []
      },
    },
    curPageName: {
      type: String,
      default: '',
    },
    query: {
      type: Object,
      default: () => { },
    },
  },
  mounted() {
    let showSearch = _.cloneDeep(this.queryFileds) // 默认展示五条搜索选项
    if (showSearch.length > 5) {
      this.checkedkeys = showSearch.splice(0, 5).map((i) => i.title)
    } else {
      this.checkedkeys = showSearch.map((i) => i.title)
    }
    let querySearch = localStorage.getItem(this.curPageName + 'Query')
    if (!!querySearch) {
      this.showSeacrhItems = querySearch
      this.checkedkeys = querySearch.split(',')
    } else {
      this.showSeacrhItems = this.checkedkeys
    }
  },
  data() {
    return {
      // query: {},
      drawerFlag: false,
      checkAll: false,
      checkedkeys: [],
      showSeacrhItems: [], // 当前页面展示的搜索选项
    }
  },
  computed: {
    keyOptions() {
      return this.queryFileds.map((i) => i.title)
    },
  },
  methods: {
    // 值
    changeSearch() {
      this.$emit('update:query', this.query)
    },
    // 筛选显示的搜索项相关
    handleCheckAllChange(val) {
      this.checkedkeys = val ? this.keyOptions : []
    },
    handleCheckedKeysChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.keyOptions.length
    },
    handleSearchSubmit() {
      if (!this.checkedkeys.length) {
        this.$message.error('最低需要一个搜索条件')
        return
      }
      this.showSeacrhItems = this.checkedkeys
      this.curPageName && localStorage.setItem(this.curPageName + 'Query', this.showSeacrhItems)
      this.drawerFlag = false
    },
  },
}
</script>

<style></style>
